import {Tabs} from "antd-mobile";
import {useEffect, useState} from "react";
import TicketCard from "../../utils/TicketCard";
import {fetchTicketsForUser} from "../../utils/http/TicketController";
import {fetchBuNoById} from "../../utils/http/BusNoController";
import {fetchStationById} from "../../utils/http/StationController";


const OrderPage = () => {

    const [activeKey, setActiveKey] = useState("all");

    const [tickets, setTickets] = useState<any>(null);

    useEffect(()=>{
        if (!tickets){
            fetchTicketsForUser()
                .then(async (res)=>{
                    const tickets = [];

                    for (const v of res) {
                        const busNos = await fetchBuNoById(v.noId);
                        if (busNos && busNos.length>0){
                            const busNo = busNos[0];
                            const start = await fetchStationById(busNo.startStation);
                            const end = await fetchStationById(busNo.endStation);
                            let state = "已购买";
                            const time = new Date(busNo.fromTime);
                            if (time.getTime()<(new Date()).getTime()){
                                state = "已完成";
                            }
                            if (v.status === 2) state="已退票";
                            if (v.status === 3) state="已改签";
                            tickets.push({
                                id: v.id,
                                state,
                                from: start.city,
                                to: end.city,
                                time,
                                nums: 1,
                                price: busNo.price,
                                noId: v.noId,
                                passenger: v.passenger
                            });
                        }
                    }
                    setTickets(tickets);
                });
        }
    });

    let items = null;
    let itemsOk = null;
    let itemsExpr = null;
    if (tickets && tickets.length>0){
        items = tickets.map((value:any)=>{
            return <TicketCard {...value} key={value.id} />;
        });
        itemsOk = tickets.filter((v:any)=>v.state==="已购买").map((value:any)=>{
            return <TicketCard {...value} key={value.id} />;
        });
        itemsExpr = tickets.filter((v:any)=>v.state==="已完成").map((value:any)=>{
            return <TicketCard {...value} key={value.id} />;
        });
    }




    return (
      <>
          <Tabs activeKey={activeKey} onChange={setActiveKey}>
              <Tabs.Tab title={"全部订单"} key={"all"}>
                  {/* 渲染全部订单 */}
                  {items || "没有订单！"}
                  {/*<TicketCard state={"已完成"} from={"乐昌"} to={"坪石"} time={new Date()} nums={1} price={16} />*/}
              </Tabs.Tab>
              <Tabs.Tab title={"待支付"} key={"future"}>
                  {/* 渲染全部订单 */}
                  没有订单
              </Tabs.Tab>
              <Tabs.Tab title={"已购买"} key={"finished"}>
                  {/* 渲染全部订单 */}
                  {itemsOk || "没有订单！"}
              </Tabs.Tab>
              <Tabs.Tab title={"已失效"} key={"expired"}>
                  {/* 渲染全部订单 */}
                  {itemsExpr || "没有订单！"}
              </Tabs.Tab>
          </Tabs>
      </>
    );
}

export default OrderPage;
